<template>

  <el-card>
    <el-calendar v-model="calendarDate">
      <template
        slot="dateCell"
        slot-scope="{date, data}">

        <div :class="{'cellColour': checkContain(data.day)}" class="cellDefault">
          <!--展示的日期-->
          <div>{{ data.day.split('-').slice(1).join('-') }}</div>
          <br/>
          <!--<div v-for="menstruation of menstruationData" :key="menstruation.id" :class="{'cellColour': (menstruation.menstruationTime === data.day)}">-->
          <!--  <span v-if="(menstruation.menstruationTime === data.day)">月经日</span>-->
          <!--</div>-->
          <el-button @click="saveMenstruation(data.day)" type="text" size="small"><i class="el-icon-plus"></i>添加</el-button>
          <el-button @click="cancelMenstruation(data.day)" type="text" size="small"><i class="el-icon-delete"></i>取消</el-button>
        </div>



      </template>
    </el-calendar>
  </el-card>

</template>

<script>

  import http from '@/utils/http'

  export default {
    // 个人月经记录
    name: "Menstruation",
    data(){
      return {
        // 已有的月经数据
        menstruationData: [],
        // 日历绑定的时间
        calendarDate: new Date()
      }
    },
    watch: {
      /**
       * 监听数据，当数据发生改变的时候，重新从后台获取最新的数据，这样就可以一直翻页渲染的时候也是有颜色的
       * 后台也没必要一次性查询出非常多的数据
       * @param val 新的值
       * @param oldVal 旧的值
       */
      calendarDate(val, oldVal){
        this.getMenstruation(val)
      }
    },
    methods: {
      /**
       * 检查当前时间是否在月经时间中
       * @param time 要检查的日期
       */
      checkContain(time){
        if (time){
          for (let menstruation of this.menstruationData){
            if (menstruation.menstruationTime === time){
              return true
            }
          }
        }
        return false
      },
      /**
       * 保存月经信息
       * @param time 要添加的时间
       */
      saveMenstruation(time){
        http.post("/menstruation/saveMenstruation", {
          menstruationTime: time,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getMenstruation(time)
          this.$message.success("添加成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 取消月经记录
       * @param time 月经时间，年月日
       */
      cancelMenstruation(time){
        http.post("/menstruation/cancelMenstruation", {
          menstruationTime: time,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.getMenstruation(time)
          this.$message.success("取消成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 查询 上月 + 本月 + 下个月的月经情况
       * @param time 月经时间，年月日
       */
      getMenstruation(time){
        http.post("/menstruation/getMenstruation", {
          time: time,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.menstruationData = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      }
    },
    mounted(){
      this.getMenstruation()
    }
  }
</script>

<style scoped>

  .cellColour {
    background-color: #FEE8EE;
    width: 100%;
    height: 100%;
  }

  .cellDefault {
    padding: 5px;
  }

</style>
